<script setup lang="ts">
import type { LessonGroupLessonItem } from '@/api/types/lesson'
import Tag from '@/components/Tag.vue'
import { LessonCourseType } from '@/enums/course'
import { getCourseTypeName } from '@/enums/enum-mapping'
import { formatClassTime } from '@/utils/format'
import { computed } from 'vue'

const props = defineProps<{
  lesson: LessonGroupLessonItem
}>()

const typeName = computed(() => {
  return getCourseTypeName(props.lesson.type)
})

const tagType = computed(() => {
  const colors = {
    [LessonCourseType.EXPERIENCE]: 'primary',
    [LessonCourseType.TRAINING]: 'warning',
    [LessonCourseType.REVIEW]: 'success',
  }
  return colors[props.lesson.type]
})
</script>

<template>
  <view class="course-item pointer">
    <view class="course-info">
      <Tag :text="typeName" class="tag" :type="tagType" />
      <view class="student-info">
        <view class="time mb-10">
          {{ formatClassTime(lesson.scheduledStartTime, lesson.scheduledEndTime) }}
        </view>
        <view class="name">
          {{ lesson.student.name }}({{ lesson.student.username }})
        </view>
        <view class="grade">
          {{ lesson.student.grade }}
        </view>
      </view>
    </view>
    <view class="action-buttons">
      <!-- <view class="btn secondary">
        试课单
      </view> -->
      <!-- <view class="btn secondary">
              词汇量报告
            </view> -->
      <!-- <view class="btn primary">
        学习内容打印
      </view>
      <view class="btn primary">
        课堂反馈
      </view> -->
    </view>
  </view>
</template>

<style lang="scss" scoped>
.course-item {
    background-color: #f8f9fc;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .course-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

        .tag {
            position: absolute;
            right: 0;
            top: 0;
        }

        .time {
            font-size: 24rpx;
        }

        .student-info {
            .name {
                font-size: 30rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 10rpx;
            }

            .grade {
                font-size: 24rpx;
                color: #999;
            }
        }
    }

    .action-buttons {
        display: flex;
        gap: 20rpx;
        margin-top: 10rpx;
        justify-content: flex-end;

        .btn {
            // flex: 1;
            text-align: center;
            padding: 16rpx 30rpx;
            border-radius: 30rpx;
            font-size: 26rpx;

            &.primary {
                background-color: #f6a035;
                color: #fff;
            }

            &.secondary {
                background-color: #eef1f6;
                color: #666;
            }
        }
    }
}
</style>
